<template>
  <Modal
    v-model:active="exportModelVueActive"
    transfer
    title="导出"
    :width="480"
    confirm-text="导出"
  >
    <ConfigProvider :props="providedProps">
      <Form :model="formModel" style="padding: 24px">
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">选择类型</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="单元类型:" prop="select">
            <Select :options="selectTypeOptions" v-model:value="value"></Select>
          </FormItem>
        </Column>
        <Divider></Divider>
        <Column :span="24">
          <div class="title">
            <div class="title_color"></div>
            <div class="title_content">选项</div>
          </div>
        </Column>
        <Column :span="18" :offset="6">
          <FormItem label="仅展示:" prop="select">
            <Checkbox></Checkbox>
          </FormItem>
        </Column>
        <Column :span="18" :offset="6">
          <FormItem label="选项和实例:" prop="select">
            <Checkbox></Checkbox>
          </FormItem>
        </Column>
      </Form>
    </ConfigProvider>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Checkbox,
  Row,
  Column,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore } from "@/UI/store";
let { exportModelVueActive } = storeToRefs(useCoreStore());
const value = ref<number>(1);
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
const formModel = reactive({
  size: "2.0",
  minSize: "0.0",
  growsSize: "1.05",
  tolerance: "0.0",
  encryptionAngle: "60.0",
});
const selectTypeOptions = [
  {
    label: "BDF",
    value: 1,
  },
];
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
